{#
 This Source Code Form is subject to the terms of the Mozilla Public
 License, v. 2.0. If a copy of the MPL was not distributed with this
 file, You can obtain one at https://mozilla.org/MPL/2.0/.
#}

{#
  Gallery Tile
  HTML Import: {% from "macros-m24.html" import gallery_tile with context %}
  CSS Import: @import '[path to]/m24/grid';
  Macro Parameters:
    class: String providing modifier class(es) to the tile component.
    cta_text: String indicating CTA text (usually a translation id wrapped in an ftl function).
    desc: String indicating paragraph text (usually a translation id wrapped in ftl function).
    heading_level: Number indicating heading level for title text. Should be based on semantic meaning, not presentational styling.
    image_desktop: Image to be used in the tile at desktop sizes. Can pass an <img> element, resp_img or picture Python helpers.
    image_mobile: Image to be used in the tile at desktop sizes. Can pass an <img> element, resp_img or picture Python helpers.
    link_attributes: A generic parameter to add any extra attributes to the CTA link, such as target, rel, or data attributes for GA tracking. Note that the quotes will pass through unescaped.
    link_url (Required): String or url helper function provides href value for the tile link.
    tag: A category tag for this gallery tile (e.g. product, program, event) (usually a translation id wrapped in ftl function).
    tag_icon: (Do not translate) Last word of the icon class. Must be configured in the CSS. Currently supports: product, program, event.
    title (Required): String indicating heading text (usually a translation id wrapped in ftl function).
#}
{% macro gallery_tile(
  class=None,
  cta_text=None,
  desc=None,
  heading_level=3,
  image=None,
  link_attributes=None,
  link_url=None,
  tag='',
  title=''
) -%}
<div class="m24-c-gallery-tile {% if class %} {{ class }}{% endif %}">
    <h{{ heading_level }} class="m24-c-gallery-tile-title">
      <a href="{{ link_url }}" class="m24-c-gallery-tile-link"{% if link_attributes %} {{ link_attributes|safe }}{% endif %}>
        <span>{{ title }}</span>
      </a>
  </h{{ heading_level }}>
  {% if image %}
  <div class="m24-c-gallery-tile-image">
    {{ image|safe }}
  </div>
  {% endif %}
  {% if tag %}
    <div class="m24-c-gallery-tile-tag">
      {% if tag_icon %}<span class="m24-c-gallery-tile-icon m24-c-gallery-tile-icon-{{ tag_icon|lower }}"></span>{% endif %}
      {{ tag }}
    </div>
  {% endif %}
  <div class="m24-c-gallery-tile-content">
    {% if desc %}
      <p class="m24-c-gallery-tile-desc">{{ desc }}</p>
    {% endif %}
    {% if cta_text %}
      <p class="m24-c-gallery-tile-cta">
        <span>{{ cta_text }}</span>
      </p>
    {% endif %}
    </div>
</div>
{%- endmacro %}

{#
  Springboard Item
  HTML Import: {% from "macros-m24.html" import springboard_item with context %}
  CSS Import: @import '[path to]/m24/foo';
  Description: The springboard component links off to media (i.e. articles, podcasts, and videos) on other sites. Each item is a row.
  Macro Parameters:
    author: Author of the media.
    class: String providing modifier class(es) to the item.
    link_attributes: A generic parameter to add any extra attributes to the CTA link, such as target, rel, or data attributes for GA tracking. Note that the quotes will pass through unescaped.
    link_url (Required): String or url helper function provides href value for item.
    preview: Blurb / summary of the media. (usually a translation id wrapped in ftl function).
    topic: One or two word topic of the item. Perhaps one of the things the item is "tagged" with if it's a blog post. (usually a translation id wrapped in ftl function).
    type: Type of media the item links to. Probably one of podcast, article, video. (usually a translation id wrapped in ftl function).
    type_icon: (Do not translate) Last word of the icon class. Must be configured in the CSS. Currently supports: podcast, article, video.
#}
{% macro springboard_item(
  author=None,
  class=None,
  link_attributes=None,
  link_url=None,
  preview=None,
  topic=None,
  type=None,
  type_icon=''
) -%}

<li class="m24-c-springboard-item {{ class }}">
  <a href="{{ link_url }}" class="m24-c-springboard-link" {{ link_attributes }}>
    <div class="m24-c-springboard-thumb">
      {% if type_icon %}
        <span class="m24-c-springboard-icon m24-c-springboard-icon-{{ type_icon|lower }}"></span>
      {% endif %}
    </div>
    <div class="m24-c-springboard-type">
      {{ type }}
    </div>
    <div class="m24-c-springboard-author">{{ author }}</div>
    <div class="m24-c-springboard-topic">{{ topic }}</div>
    <div class="m24-c-springboard-preview">{{ preview }}</div>
  </a>
</li>
{%- endmacro %}
